<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/tailwind.min.css">
    <style>
        .to-fuchsia-100 {
            --tw-gradient-to: #d88aee;
        }

        .from-fuchsia-50 {
            --tw-gradient-from: #fdf4ff;
            --tw-gradient-stops: #dddddd, var(--tw-gradient-to, rgba(253, 244, 255, 0));
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div class="container h-10 bg-red-300  flex justify-center align-items-center justify-items-center items-center">12</div>

    <div class=" container mx-auto my-auto relative overflow-hidden mb-8">
        <div class="rounded-t-xl overflow-hidden bg-gradient-to-r from-fuchsia-50 to-fuchsia-100 p-10">
            <div class="overflow-scroll h-32 rounded-md bg-fuchsia-200">
                <p class="inline-block font-flow leading-5 text-fuchsia-700 px-6 py-4">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6.
                    Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida
                    lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In
                    porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique
                    justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit
                    amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus
                    lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus
                    urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque.
                    Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor
                    ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh
                    eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In
                    id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus
                    scelerisque leo fringilla vel.
                </p>
            </div>
        </div>
        <div class="overflow-hidden rounded-b-xl bg-fuchsia-400">
            <pre
                class="scrollbar-none overflow-x-auto p-6 text-sm leading-snug language-html text-white bg-black bg-opacity-75"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="code-highlight bg-code-highlight">overflow-scroll</span> h-32 ...<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Lorem ipsum dolor sit amet...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></code></pre>
        </div>
    </div>
</body>

</html>